<template>
	<view class="quanbu1">
		<view class="btou">
			<view class="tu" @click="storyByTypeList()">
				<view class="img">
					<image src="../../static/6521.png" mode=""></image>
				</view>
				<view class="tetx">
					全部
				</view>
			</view>
			<view class="tu" @click="storyByTypeList(item.id)" v-for="item,index in typeList" :key="index">
				<view class="img">
					<image src="../../static/6520.png" mode="" v-if="index==0"></image>
					<image src="../../static/16519.png" mode="" v-if="index==1"></image>
					<image src="../../static/16523.png" mode="" v-if="index==2"></image>
				</view>
				<view class="tetx">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="xxzs" v-for="(item,index) in zhis" :key="index" @click="godetails(item)">
			<view class="xgimg">
				<image :src="url + item.cover" mode="aspectFill"></image>
			</view>
			<view class="xgtext">
				{{item.title}}
			</view>
			<view class="xgneir">
				{{item.msg}}
			</view>
		</view>

	</view>
	<zdy-tabbar :current-page='3'></zdy-tabbar>
</template>

<script>
	import {
		allType,
		storyByType
	} from "../../request/api.js"
	export default {
		data() {
			return {
				zhis: [],
				image: '',
				erimagesUrl: [],
				typeList: [],
				url: '',
			}
		},
		onLoad() {

		},
		onShow() {
			console.log(getApp().globalData.url, 'img');
			if (getApp().globalData.url) {
				this.url = getApp().globalData.url + '/'
			}
			this.allTypeList()
			this.storyByTypeList()
			// this.clinicala(1)
		},
		methods: {
			godetails(e) {
				getApp().globalData.empowerment = e
				uni.navigateTo({
					url: "/pages/empowerment/details/details"
				})
			},
			storyByTypeList(e) {
				let a = null
				if (e) {
					a = {
						type: e
					}
				}
				uni.showLoading({
					title: '加载中...'
				})
				console.log(e);
				storyByType(a).then(res => {
					uni.hideLoading()
					this.zhis = res.result
					console.log(res);
				})
			},
			allTypeList() {
				allType().then(res => {
					this.typeList = res.result
					console.log(res, '全部的分类信息');
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #FAFAFA;
	}
</style>
<style scoped lang="less">
	.quanbu1 {
		width: 100vw;
		height: 100vh;
		background: #FAFAFA;
		padding-top: 48rpx;

	}

	.btou {
		width: 702rpx;
		height: 213rpx;
		display: flex;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 32rpx 28rpx;
		box-sizing: border-box;
		justify-content: space-between;



		.tu {
			text-align: center;

			.img {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.tetx {

				font-weight: 400;
				font-size: 24rpx;
				color: #333333;

				font-style: normal;
				text-transform: none;
				margin-top: 20rpx;
			}
		}
	}

	.xxzs {
		width: 702rpx;
		// height: 465rpx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 16rpx;
		border-radius: 20rpx;
		padding-bottom: 32rpx;
		box-sizing: border-box;

		.xgimg {
			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 702rpx;
				height: 281rpx;
			}
		}

		.xgtext {

			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			font-style: normal;
			text-transform: none;
			margin-top: 20rpx;
			margin-bottom: 15rpx;
			padding-right: 20rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}

		.xgneir {
			;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 42rpx;

			font-style: normal;
			text-transform: none;
			padding-right: 20rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}

	}

	.axxzs {
		width: 702rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 16rpx;
		border-radius: 20rpx;
		background: #FFFFFF;


		.aztext {

			font-weight: 500;
			font-size: 32rpx;
			color: #333333;

			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 15rpx;
		}

		.azner {

			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.zzimg {
		width: 702rpx;
		height: 281rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		background: #FFFFFF;

		image {
			width: 702rpx;
			height: 281rpx;
		}
	}
</style>